<template>
    <view class="content">
        <view class="main">
            <!-- <van-nav-bar :title="scrolling ? navBarTitle : ''" left-arrow @click-left="onClickLeft"> </van-nav-bar> -->
            <scroll-view class="scroll-content" scroll-y :lower-threshold="80" @scroll="scrollPage" show-scrollbar="false">
                <view class="content-top fixed_top" id="content_top">
                    <van-nav-bar :title="scrolling ? navBarTitle : ''" left-arrow @click-left="onClickLeft"
                        class="fixed_top" id="navBar"> </van-nav-bar>
                </view>
                <view class="main-container">
                    <view class="myScoreBg" ref="myScoreBg">
                        <img :src="blindBoxInfo.imageUrl ? blindBoxInfo.imageUrl:defaultImg" alt="">
                    </view>
                    <view class="giftDetail">
                        <view class="giftDetailTop">恭喜完成【{{blindBoxInfo.taskName}}】</view>
                        <!-- <view class="giftDetailMiddle">16666积分</view> -->
                        <view class="giftDetailBottom">{{blindBoxInfo.name}}</view>

                    </view>
                    <!-- <van-button type="default">24/12/12 已领取</van-button> -->
                </view>
            </scroll-view>
            <view class="bottom">
                <van-button type="default" @click="checkRewards">查看盲盒奖品</van-button>
            </view>
        </view>
    </view>
</template>

<script>
import {receiveJumpApi} from '@/api/checkedInTask'
export default {
    components: {

    },
    data() {
        return {
            defaultImg: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/giftJinbi.png',
            navBarTitle: '我的礼品',
            scrolling:false,
            params:{}, //接受从路由传过来的参数
            giftList:[
                {
                    date:'2024/12/20',
                    status:'已签到',
                    num:5
                },
                {
                    date:'2024/12/20',
                    status:'已签到',
                    num:116
                },
                {
                    date:'2024/12/20',
                    status:'已签到',
                    num:20
                },
            ],
            blindBoxInfo:null,
            receiptsRecordId:undefined,
            id: null,
            status:null,
            taskManagementId:undefined

        }
    },
    onLoad(data) {
        if(data && data.params){
            this.params = JSON.parse(decodeURIComponent(data.params))
            console.log(this.params,'params')
            this.receiptsRecordId = this.params?.receiptsRecordId || '175507847734497280';
            this.id = this.params?.blindBoxId || undefined
            // this.status = this.params?.status || undefined
            this.taskManagementId = this.params?.taskManagementId || undefined
            console.log('receiptsRecordId:', this.receiptsRecordId);
            console.log('blindBoxId:', this.id);
        }
        
    },
    onReady(){

    },
    onShow(){
        this.receiveJump()
    },
    methods: {
        // 滑动
        scrollPage(e) {
            console.log(e.detail.scrollTop, this.scrolling)
            if (e.detail.scrollTop > 25 && !this.scrolling) {
                this.scrolling = true
            } else if ((e.detail.scrollTop <= 25 && this.scrolling) || (e.detail.scrollTop <= 25 && !this.scrolling)) {
                this.scrolling = false
            }
        },
        // 返回键
        onClickLeft () {
            uni.navigateBack()
        },
        // // 我的礼品详情
        // toMyGiftDetailPage(){
        //     uni.navigateTo({
        //         url:'/pages/blindBox/myGiftInfo'
        //     })
        // },
        
        // 查看盲盒奖品 跳转至七天盲盒那个页面
        checkRewards(){
            const params = {
                receiptsRecordId: this.receiptsRecordId,
                taskManagementId: this.taskManagementId
            }
            uni.navigateTo({
                url:'/pages/blindBox/openBlindBox?params=' +
                    encodeURIComponent(JSON.stringify(params))
            })
        },
        // 接口
        async receiveJump(){
            const res = await receiveJumpApi({receiptsRecordId:this.receiptsRecordId})
            if(res.code==200){
                this.blindBoxInfo = res.data || {}
                console.log(res.data,'res.data',this.blindBoxInfo)
                this.taskManagementId = res.data?.taskManagementId ||undefined
            }
        }
       
    }
}
</script>

<style lang="scss" scoped>
::v-deep .van-nav-bar {
    background-color: transparent !important;
}


.content {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    // height: 100vh;
    height: calc(100vh - env(safe-area-inset-bottom));
    overflow-y: auto;
    z-index: -2;
    background-size: 100%;
    background-color: #ffffff;
    padding-bottom: (safe-area-inset-bottom);

}

.main {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100vh;
    background-color: transparent;

    .fixed_top {
        position: fixed;
        width: 100%;
        z-index: 999;
    }

    .top_display {
        display: none;
    }
}

.scroll-content {
    flex: 1;
    height: 1px;
}
.main-container {
    background: #ffffff;
    height: 100vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    z-index: -1;

}
.myScoreBg {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 580rpx;
    background-color: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: center;

    .top_swiper {
        display: block;
        height: 580rpx;
    }

    img {
        width: 280rpx;
        height:364rpx;
    }
}
.giftDetail{
    z-index: 1;
    margin-top: 620rpx;
    padding: 0px 48rpx;
    .giftDetailTop{
        font-size: 32rpx;
        text-align: left;
        color: #666666;
        line-height: 32rpx;
    }
    .giftDetailMiddle{
        font-size: 28rpx;
        text-align: left;
        color: #111111;
        line-height: 28rpx;
        margin: 42rpx 0rpx;
    }
    .giftDetailBottom{
        font-size: 40rpx;
        text-align: left;
        color: #111111;
        line-height: 40rpx;
        margin-top: 44rpx;
    }
}

::v-deep .van-nav-bar__left {
    width: 56px;
    height: 44px;
}

::v-deep .van-icon {
    color: #242629 !important;
}

// 滚动条 去掉自带的文字提示  
::v-deep .van-progress__pivot {
	display: none;
}
::v-deep .van-button--primary {
    width: 670rpx;
    height: 96rpx;
    border-radius: 48rpx;
    background: #FF6203 !important;
    border: 1px solid #ff6203 !important;
}
::v-deep .van-button--default {
    // margin-top: 50rpx;
    // margin-bottom: 50rpx;
    width:100%;
    height: 76rpx;
    border-radius: 48rpx;
    background: transparent !important;
    border: 2rpx solid #ff6202 !important;
    color: #ff6203 !important;
    font-size: 32rpx;
}
</style>
